<%@ page contentType="text/html;charset=UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <title>表单设计</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="../css/ueditor/bootstrap.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/lib/ueditor/formdesign/bootstrap/css/bootstrap.css"/>
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="${ctx }/styles/bootstrap/2.2.2/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="${ctx }/styles/bootstrap/2.2.2/css/ie.css">
    <![endif]-->
    <link href="../css/ueditor/site.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../css/ueditor/styleUpdate.css?2020115">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="/lib/layui/layui/css/layui.css"/>
    <script type="text/javascript" src="../../js/jquery/jquery-1.9.1.js" ></script>
    <script src="../../js/base/base.js"></script>
    <script src="../../js/workflow/work/workform.js?201907053"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js?20200923" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/ueditor/formdesign/bootstrap/js/bootstrap.js?20200826" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/ueditor/ueditor.config.js?20200924" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/ueditor/ueditor.all.js?20200715.1" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/ueditor/UEcontroller.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>


    <style>
        /*右侧整体内容*/
        .row::-webkit-scrollbar,.people_wenjian::-webkit-scrollbar{
            width: 0px;
            height: 16px;
            background-color: #f5f5f5;
        }
        /*定义滚动条的轨道，内阴影及圆角*/
        .row::-webkit-scrollbar-track,.people_wenjian::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            border-radius: 10px;
            background-color: #f5f5f5;
        }
        /*定义滑块，内阴影及圆角*/
        .row::-webkit-scrollbar-thumb,.people_wenjian::-webkit-scrollbar-thumb{
            width: 0px;
            height: 20px;
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #555;
        }
        .row .nav-list > li > span{
            display: block;
            font-size: 14px;
            color: #7e8f99;
            text-align: left;
            border: none;
            height: 32px;
            line-height: 32px;
            text-decoration: none;
        }
        .row .nav-list > li > span:hover {
            background: #ccebff;
        }
        .nav-list > li > span {
            padding: 3px 15px;
        }
        .nav-list > li > span{
            margin-left: -15px;
            margin-right: -15px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        }
        .row .nav-list > li > span > img {
            width: 18px;
            height: 18px;
            margin-right: 12px;
            vertical-align: -4px;
        }
        .nav > li > span > img {
            max-width: none;
        }
        /*#table_box>table{*/
        /*margin: auto auto;*/
        /*}*/
        .container_lb .list00 li{
            height: 70px;
        }
        .container_lb .list00 li.active{
            display: block;
        }
        .container_lb .list00 li .text-wz{
            left: 10px;
            top: 13px;
            font-size: 11pt;
        }
        .text-wz{
            width: calc(100% - 128px)!important;
            margin-left: 90px;
        }
        .container_lb .zz{
            bottom: -8px;
            right: 20px;
        }
        .li{
            display: none;
            background: url(../../img/workflow/form/lb_backnew.png) no-repeat;
        }
        .imgs{
            z-index: 999;
            position: absolute;
            top: 6px;
            left: 20px;
            width: 97px;
        }
        #saveform .span10{
            width: calc(100% - 20px);
            margin-left: 10px;
            margin-top: 10px;
        }
        .row .nav-list .nav-header .header_l{
            border: none;
        }
        .container_lb .arrow{
            user-select: none;
        }
        .edui-for-wordimport {
            position: fixed!important;
            margin-left: 106px!important;
            margin-top: 3px!important;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    var pluginId = 1;
    var formEditor;
</script>
<div class="container">
    <span id="formtitle" class="title"></span>
    <p class="nav-right">
        <a href="javascript:void(0)" id="saveFrom_btn" class="updateForm">保存表单</a>
        <a href="javascript:void(0)" id="preview_btn" class="save_f">预览</a>
        <%--<a href="javascript:void(0)" class="save_f">生成版本</a>--%>
        <a href="javascript:void(0)" id="close_btn" class="save_f">关闭</a>
    </p>
    <%--<div class="title_nav" class="clearfix">--%>
    <%--<p class="nav-left">表单智能设计器:您需要先布局,才可以拖拽右侧的组件到左侧内容里设计工作流表单</p>--%>
    <%--<p class="nav-right">--%>
    <%--<a href="javascript:void(0)" id="saveFrom_btn" class="updateForm">保存表单</a>--%>
    <%--<a href="javascript:void(0)" id="preview_btn" class="save_f">浏览</a>--%>
    <%--<a href="javascript:void(0)" class="save_f">生成版本</a>--%>
    <%--<a href="javascript:void(0)" id="close_btn" class="save_f">关闭</a>--%>
    <%--</p>--%>
    <%--</div>--%>
    <form method="post" id="saveform" name="saveform" action="" class="clearfix">
        <input type="hidden" name="fields" id="fields" value="${form.fieldNum }">

        <div class="row" id="content" style="overflow-x: hidden;overflow-y: auto;">
            <%--<div class="span2">--%>
            <ul class="nav-list">
                <li class="nav-header">
                    <div class="header_l">表单控件</div>
                    <div class="header_r" style="display:none;">扩展控件</div>
                </li>
            </ul>
            <div id="contentDiv" style="overflow: hidden auto;">
                <ul class="nav nav-list" id="nav">

                    <li><span type="text"  class="btn btn-link">
                    <img src="../img/workflow/form/icon_textbox.png" alt="">单行文本框
                </span></li>
                    <li><span type="textarea"  class="btn btn-link">
                    <img src="../img/workflow/form/icon_multiplelinetextbox.png" alt="">多行文本框</span></li>
                    <li><span type="select"  class="btn btn-link">
                    <img src="../img/workflow/form/icon_dropmenu.png" alt="">下拉菜单</span></li>
                    <li><span type="radio"  class="btn btn-link">
                    <img src="../img/workflow/form/icon_radiobutton.png" alt="">单选框</span></li>
                    <li><span type="checkbox"  class="btn btn-link">
                    <img src="../img/workflow/form/icon_checkbox.png" alt="">复选框</span></li>
                    <li><span type="macros" class="btn btn-link">
                    <img src="../img/workflow/form/icon_hongcontrol.png" alt="">宏控件</span></li>

                    <li style=""><span type="listing" class="btn btn-link">
                    <img src="../img/workflow/form/icon_list.png" alt="">列表控件</span></li>

                    <li><span type="calendar" class="btn btn-link">
                    <img src="../img/workflow/form/icon_calendar.png" alt="">日历控件</span></li>
                    <li><span type="calculation"  class="btn btn-link">
                    <img src="../img/workflow/form/icon_calendar.png" alt="">计算控件</span>
                    </li>
                    <li><span type="macrossign" class="btn btn-link">
                    <img src="../img/workflow/form/icon_macrosign.png" alt="">宏标记</span>
                    </li>
                    <li><span type="autocode" class="btn btn-link">
                    <img src="../img/workflow/form/icon_AtuoNumber.png" alt="">自动编号</span>
                    </li>
                    <li><span type="imgupload" class="btn btn-link">
                    <img src="../img/workflow/form/icon_imgUpload.png" alt="">图片上传控件</span>
                    </li>
                    <li><span type="fileupload" class="btn btn-link">
                    <img src="../img/workflow/form/icon_DocUpload.png" alt="">文件上传控件</span>
                    </li>
                    <li><span type="sign" class="btn btn-link">
                    <img src="../img/workflow/form/icon_countersign.png" alt="">会签控件</span>
                    </li>
                    <li><span type="userselect" class="btn btn-link">
                    <img src="../img/workflow/form/user_select.png" alt="">用户选择控件</span>
                    </li>

                    <li><span type="deptselect" class="btn btn-link">
                    <img src="../img/workflow/form/group_select.png" alt="">部门选择控件</span>
                    </li>

                    <li><span type="extdataselect" class="btn btn-link">
                    <img src="../img/workflow/form/extdataselection.png" alt="">外部数据选择控件</span>
                    </li>
                    <li><span type="dataselect" class="btn btn-link">
                    <img src="../img/workflow/form/dataselection.png" alt="">数据选择控件</span>
                    </li>
                    <%--<li><span type="formdataselect" class="btn btn-link">
                        <img src="../img/workflow/form/formdataselection.png" alt="">表单选择控件</span>
                    </li>--%>

                    <li><span type="qrcode" class="btn btn-link">
                    <img src="../img/workflow/form/qrcodeicon.png" alt="">二维码控件</span>
                    </li>
                    <li><span type="writesign" class="btn btn-link">
                    <img src="../img/workflow/form/icon_countersign.png" alt="">手写签字控件</span>
                    </li>
                    <li><span type="djsign" class="btn btn-link">
                    <img src="../img/workflow/form/icon_kdsign.png" alt="">签章控件(点聚)</span>
                    </li>
                    <li><span type="kgsign" class="btn btn-link">
                    <img src="../img/workflow/form/icon_kdsign.png" alt="">签章控件(金格)</span>
                    </li>
                    <li><span type="readcomments" class="btn btn-link">
                    <img src="../img/workflow/form/icon_DocUpload.png" alt="">阅文意见控件</span>
                    </li>
                    <li><span type="countersignature_item" class="btn btn-link">
                    <img src="../img/workflow/form/icon_DocUpload.png" alt="">传阅意见控件</span>
                    </li>
                    <li><span type="mark" class="btn btn-link">
                    <img src="../img/workflow/form/stars2.png" alt="" style="vertical-align: 0px;height: auto">评分控件</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="con_left" id="table_box" style=" width: calc(100% - 309px);">
            <%--<div id="ueBoc"></div>--%>
            <div class="span10">
                <script type="text/javascript" charset="utf-8" src="../lib/ueditor/ueditor.config.js?20200924"></script>
                <script type="text/javascript" charset="utf-8" src="../lib/ueditor/ueditor.all.js?20190705"> </script>
                <script type="text/javascript" charset="utf-8" src="../lib/ueditor/lang/zh-cn/zh-cn.js"></script>
                <script type="text/javascript" charset="utf-8" src="../lib/ueditor/formdesign/formdesign.v4.js?20191231.1"></script>
                <script id="formEditor" type="text/plain" style="width:100%;height: 100%">${form.originalHtml}</script>

                <script src="../lib/layer/layer.js?20201106"></script>
                <!-- script start-->
                <script type="text/javascript">
                    var editorVal=null;
                    var formDesign = {};
                    $(function() {
                        $('.listclear').click(function () {
                            // $(this).parent().hide()
                            $(this).parent().parent().hide()
                        })
                        autodivheight();
                        function autodivheight() {
                            var winHeight = 0;
                            if (window.innerHeight)
                                winHeight = window.innerHeight;
                            else if ((document.body) && (document.body.clientHeight))
                                winHeight = document.body.clientHeight;
                            if (document.documentElement && document.documentElement.clientHeight)
                                winHeight = document.documentElement.clientHeight;
                            winWidth = document.documentElement.clientWidth;
                            document.getElementById("table_box").style.height = winHeight - 76  + "px";
                            document.getElementById("content").style.height = winHeight - 56  + "px";
                            document.getElementById("contentDiv").style.height = winHeight - 131  + "px";
                            var width = $('#table_box').width()+'px';
                            $('head').append('<style>.container_lb .list00 li{width:'+ width +';}.container_lb{width: '+ width +';}</style>')
                            $('.edui-editor-iframeholder').css('height',winHeight - 176+'px');
                        }
                        window.onresize = autodivheight;
                        var ueheight = $('#table_box').height() - 100;
                        var formid = $.getQueryString("formId")
                        var type = $.getQueryString("type")
                        $("#content .nav-list ").on("click", 'span', function() {

                            formDesign.exec($(this).attr('type'));
                        });
                        formEditor = UE.getEditor('formEditor', {
                            toolleipi: true, //是否显示，设计器的 toolbars
                            textarea: 'design_content',
                            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
                            toolbars: [
                                [
                                    'fullscreen', 'source', '|', 'undo', 'redo', '|',
                                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                                    'link', 'unlink', 'anchor', '|' , 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                                    'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                                    'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                                    'print', 'preview', 'searchreplace', 'help', 'drafts','wordimport', '|']
                            ],
                            //focus时自动清空初始化时的内容
                            //autoClearinitialContent:true,
                            //关闭字数统计
                            wordCount: false,
                            //关闭elementPath
                            elementPathEnabled: false,
                            //默认的编辑区域高度
                            initialFrameHeight: ueheight,
                            //编辑器宽度
                            autoClearEmptyNode:true,
                            //                            initialFrameWidth: auto,

                            iframeCssUrl: "../css/ueditor/formBootstrap.css?20200903.1" //引入自身 css使编辑器兼容你网站css
                            //更多其他参数，请参考ueditor.config.js中的配置项
                        });
                        formEditor.ready(function() {
                            $('#preview_btn').on('click', function() {
                                var url = '../workflow/work/workform1?formId='+formid;
                                $.popWindow(url,'表单预览',100,300,900,600)
                            });
                            $('#close_btn').on('click', function() {
                                window.close();
                            });
                            $('#saveFrom_btn').on('click', function() {
                                if (formEditor.hasContents()) {
                                    var itemMax = 0;
                                    var checkMore = {};
                                    var checkTitleArr = [];
                                    var checkTitle = {};
                                    var checkFlag = true;
                                    $(formEditor.getContent()).find('.form_item ').each(function () {
                                        var name = $(this).attr('name');
                                        var title = $(this).attr('title');
                                        var dataType = $(this).attr('data-type');
                                        if( checkMore[name]){
                                            checkFlag = false;
                                            layer.msg('当前控件信息：<br>'+ ' &nbsp;&nbsp;控件名称：'+title+' 控件类型：'+checkPluType(dataType)+' 控件编号：'+name+'<br>重复控件信息：<br>'+ checkMore[name],{icon:3,area:['500px','auto']})
                                            return false;
                                        }else{
                                            checkMore[name] = ' &nbsp;&nbsp;控件名称：'+title+' 控件类型：'+checkPluType(dataType)+' 控件编号：'+name;
                                            checkMore[name].flag = true;
                                        }
                                        if( checkTitle[title]){
                                            checkFlag = false;
                                            layer.msg('当前控件信息：<br>'+ ' &nbsp;&nbsp;控件名称：'+title+' 控件类型：'+checkPluType(dataType)+' 控件编号：'+name+'<br>重复控件信息：<br>'+checkTitle[title],{icon:3,area:['500px','auto']})
                                            return false;
                                        }else{
                                            checkTitle[title] = ' &nbsp;&nbsp;控件名称：'+title+' 控件类型：'+checkPluType(dataType)+' 控件编号：'+name;
                                            checkTitle[title].flag = true;
                                        }


                                        var max = parseInt(name.split('_')[1]);
                                        if(!isNaN(max) && (max > itemMax)){
                                            itemMax = max;
                                        }
                                    });
//                                    if(checkTitleArr.length > 0){
//                                        layer.msg('控件名称在 '+checkTitleArr.join(',')+'存在重复',{icon:3})
//                                        return false;
//                                    }
//                                    if(checkName.length > 0){
//                                        layer.confirm('控件字段在 '+checkName.join(',')+'存在重复', {
//                                            btn: ['修复','取消'] ,icon: 3,title:'字段重复'
//                                        }, function(){
//
//                                            recalculation($('<div>'+formEditor.getContent()+'</div>'),function (flag,maxIndex,obj) {
//                                                if(flag){
//                                                    formEditor.setContent(obj.prop("outerHTML"));
//                                                    itemMax = maxIndex;
//                                                    $('#saveFrom_btn').click();
//                                                    return false;
//                                                }
//                                            })
//                                        }, function(){
//
//                                        });
//                                        return false;
//                                    }

                                    if(checkFlag){
                                        $.ajax({
                                            type: 'POST',
                                            url: 'updateFormType',
                                            dataType : 'json',
                                            data: {
                                                'formId': formid,
                                                'printModel': formEditor.getContent(),
                                                'itemMax':itemMax
                                            },
                                            success: function(data) {
                                                if (data.flag) {
                                                    layer.msg('表单保存成功', {icon: 1});
                                                    // window.location.href='${ctx}/config/form';
                                                } else {
                                                    layer.msg('表单保存失败', {icon: 2});
                                                }
                                            }
                                        });
                                    }

                                }else{
                                    layer.msg('表单内容不能为空', {icon: 0});
                                }

                            })
                            if (type == 'edit') {
                                $.ajax({
                                    type: "get",
                                    url: "../form/formType",
                                    dataType: 'JSON',
                                    data: {
                                        fromId: formid
                                    },
                                    success: function(res) {
                                        var formObj = $('<div>' + res.object.printModel + '</div>');

                                        workForm.ReBuild(formObj);
                                        $('#formtitle').html(res.object.formName);
                                        $(formObj).find('table').attr('align','center')
                                        formEditor.setContent(formObj.html(), true);

                                        if(res.object.itemMax){

                                            pluginId = (res.object.itemMax+1);
                                        }
                                        //    console.log($(formObj).find('table'))

                                    }
                                });
                            }
                        });

                        UE.registerUI('td_js_script', function(editor, uiname){
                            var me = this;
                            // 创建dialog
                            var jsDialog = new UE.ui.Dialog({

                                // 指定弹出层路径
                                iframeUrl: '/workflow/formtype/control?formId='+formid+'&control=1',
                                // 编辑器实例
                                editor: editor,
                                // dialog 名称
                                name: 'js',
                                // dialog 标题
                                title: 'JS脚本',

                                // dialog 外围 css
                                cssRules:"width:600px;height:350px;",

                                //如果给出了buttons就代表dialog有确定和取消
                                buttons:[
                                    {
                                        className:'edui-okbutton',
                                        label:'确定',
                                        onclick:function () {
                                            var js=editorVal.getValue();
                                            $.ajax({
                                                type: "post",
                                                url: "/form/updateFormType",
                                                dataType: 'JSON',
                                                data: {
                                                    formId: formid,
                                                    script:js
                                                },
                                                success: function (res) {
                                                    //   console.log("js ")

                                                }
                                            })
                                            jsDialog.close(true);
                                        }
                                    },
                                    {
                                        className:'edui-cancelbutton',
                                        label:'取消',
                                        onclick:function () {
                                            jsDialog.close(false);
                                        }
                                    }
                                ]});

                            editor.ready(function(){
                                //UE.utils.cssRule('td_js_script', 'img.td_js_script{vertical-align: middle;}', editor.document);
                            });

                            var iconUrl = '/img/workflow/js.png';
                            var tmpLink = document.createElement('a');
                            tmpLink.href = iconUrl;
                            tmpLink.href = tmpLink.href;
                            iconUrl = tmpLink.href;

                            var jsBtn = new UE.ui.Button({
                                name: uiname,
                                title: 'JS脚本',
                                //需要添加的额外样式，指定icon图标
                                cssRules :'background: url("' + iconUrl + '") no-repeat center center !important',
                                onclick:function () {
                                    //渲染dialog
                                    jsDialog.render();
                                    jsDialog.open();
                                    me.currentField = "js";
                                    me.ui._dialogs['jsDialog'] = jsDialog;
                                }
                            });

                            //当点到编辑内容上时，按钮要做的状态反射
                            editor.addListener('selectionchange', function () {
                                var state = editor.queryCommandState(uiname);
                                if (state == -1) {
                                    jsBtn.setDisabled(true);
                                    jsBtn.setChecked(false);
                                } else {
                                    jsBtn.setDisabled(false);
                                    jsBtn.setChecked(state);
                                }
                            });

                            return jsBtn;
                        });
                        UE.registerUI('td_css_script', function(editor, uiname){
                            var me = this;
                            // 创建dialog
                            var cssDialog = new UE.ui.Dialog({

                                // 指定弹出层路径
                                iframeUrl: '/workflow/formtype/control?formId='+formid+'&control=2',
                                // 编辑器实例
                                editor: editor,
                                // dialog 名称
                                name: 'css',
                                // dialog 标题
                                title: 'CSS样式',

                                // dialog 外围 css
                                cssRules: 'width:600px; height: 350px;',

                                //如果给出了buttons就代表dialog有确定和取消
                                buttons:[
                                    {
                                        className:'edui-okbutton',
                                        label:'确定',
                                        onclick:function () {

                                            //   console.log(editorVal.getValue())
                                            var css=editorVal.getValue();
                                            $.ajax({
                                                type: "post",
                                                url: "/form/updateFormType",
                                                dataType: 'JSON',
                                                data: {
                                                    formId: formid,
                                                    css:css
                                                },
                                                success: function (res) {
                                                    //    console.log("css ")
                                                }
                                            })
                                            cssDialog.close(true);
                                        }
                                    },
                                    {
                                        className:'edui-cancelbutton',
                                        label:'取消',
                                        onclick:function () {
                                            cssDialog.close(false);
                                        }
                                    }
                                ]});

                            editor.ready(function(){
                                //UE.utils.cssRule('td_css_script', 'img.td_css_script{vertical-align: middle;}', editor.document);
                            });

                            var iconUrl = '/img/workflow/css.png';
                            var tmpLink = document.createElement('a');
                            tmpLink.href = iconUrl;
                            tmpLink.href = tmpLink.href;
                            iconUrl = tmpLink.href;

                            var cssBtn = new UE.ui.Button({
                                name: uiname,
                                title: 'CSS样式',
                                //需要添加的额外样式，指定icon图标
                                cssRules :'background: url("' + iconUrl + '") no-repeat center center !important',
                                onclick:function () {
                                    //渲染dialog
                                    cssDialog.render();
                                    cssDialog.open();
                                    me.currentField = "css";
                                    me.ui._dialogs['cssDialog'] = cssDialog;
                                }
                            });

                            //当点到编辑内容上时，按钮要做的状态反射
                            editor.addListener('selectionchange', function () {
                                var state = editor.queryCommandState(uiname);
                                if (state == -1) {
                                    cssBtn.setDisabled(true);
                                    cssBtn.setChecked(false);
                                } else {
                                    cssBtn.setDisabled(false);
                                    cssBtn.setChecked(state);
                                }
                            });

                            return cssBtn;
                        });

                        formDesign = {

                            /*执行控件*/
                            exec: function(method) {

                                formEditor.execCommand(method);
                            },
                            /*
                             Javascript 解析表单
                             template 表单设计器里的Html内容
                             fields 字段总数
                             */
                            parse_form: function(template, fields) {
                                debugger;

                                //正则  radios|checkboxs|select 匹配的边界 |--|  因为当使用 {} 时js报错 (plugins|fieldname|fieldflow)
                                var preg = /(\|-<span(((?!<span).)*plugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,
                                    preg_attr = /(\w+)=\"(.?|.+?)\"/gi,
                                    preg_group = /<input.*?\/>/gi;
                                if (!fields) fields = 0;

                                var template_parse = template,
                                    template_data = new Array(),
                                    add_fields = new Object(),
                                    checkboxs = 0;

                                var pno = 0;
                                template.replace(preg, function(plugin, p1, p2, p3, p4, p5, p6) {
                                    var parse_attr = new Array(),
                                        attr_arr_all = new Object(),
                                        name = '',
                                        select_dot = '',
                                        is_new = false;
                                    var p0 = plugin;
                                    var tag = p6 ? p6 : p4;
                                    //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);

                                    if (tag == 'radios' || tag == 'checkboxs') {
                                        plugin = p2;
                                    } else if (tag == 'select') {
                                        plugin = plugin.replace('|-', '');
                                        plugin = plugin.replace('-|', '');
                                    }
                                    plugin.replace(preg_attr, function(str0, attr, val) {
                                        if (attr == 'name') {
                                            if (val == 'NEWFIELD') {
                                                is_new = true;
                                                fields++;
                                                val = 'data_' + fields;
                                            }
                                            name = val;
                                        }
                                        if (tag == 'select' && attr == 'value') {
                                            if (!attr_arr_all[attr]) attr_arr_all[attr] = '';
                                            attr_arr_all[attr] += select_dot + val;
                                            select_dot = ',';
                                        } else {
                                            attr_arr_all[attr] = val;
                                        }
                                        var oField = new Object();
                                        oField[attr] = val;
                                        parse_attr.push(oField);
                                    })
                                    /*alert(JSON.stringify(parse_attr));return;*/
                                    if (tag == 'checkboxs') /*复选组  多个字段 */ {
                                        plugin = p0;
                                        plugin = plugin.replace('|-', '');
                                        plugin = plugin.replace('-|', '');
                                        var name = 'checkboxs_' + checkboxs;
                                        attr_arr_all['parse_name'] = name;
                                        attr_arr_all['name'] = '';
                                        attr_arr_all['value'] = '';
                                        attr_arr_all['content'] = '<span plugins="checkboxs"  title="' + attr_arr_all['title'] + '">';
                                        var dot_name = '',
                                            dot_value = '';
                                        p5.replace(preg_group, function(parse_group) {
                                            var is_new = false,
                                                option = new Object();
                                            parse_group.replace(preg_attr, function(str0, k, val) {
                                                if (k == 'name') {
                                                    if (val == 'NEWFIELD') {
                                                        is_new = true;
                                                        fields++;
                                                        val = 'data_' + fields;
                                                    }
                                                    attr_arr_all['name'] += dot_name + val;
                                                    dot_name = ',';
                                                } else if (k == 'value') {
                                                    attr_arr_all['value'] += dot_value + val;
                                                    dot_value = ',';
                                                }
                                                option[k] = val;
                                            });

                                            if (!attr_arr_all['options']) attr_arr_all['options'] = new Array();
                                            attr_arr_all['options'].push(option);
                                            if (!option['checked']) option['checked'] = '';
                                            var checked = option['checked'] ? 'checked="checked"' : '';
                                            attr_arr_all['content'] += '<input type="checkbox" name="' + option['name'] + '" value="' + option['value'] + '" fieldname="' + attr_arr_all['fieldname'] + option['fieldname'] + '" fieldflow="' + attr_arr_all['fieldflow'] + '" ' + checked + '/>' + option['value'] + '&nbsp;';

                                            if (is_new) {
                                                var arr = new Object();
                                                arr['name'] = option['name'];
                                                arr['plugins'] = attr_arr_all['plugins'];
                                                arr['fieldname'] = attr_arr_all['fieldname'] + option['fieldname'];
                                                arr['fieldflow'] = attr_arr_all['fieldflow'];
                                                add_fields[option['name']] = arr;
                                            }

                                        });
                                        attr_arr_all['content'] += '</span>';
                                        //parse
                                        template = template.replace(plugin, attr_arr_all['content']);
                                        template_parse = template_parse.replace(plugin, '{' + name + '}');
                                        template_parse = template_parse.replace('{|-', '');
                                        template_parse = template_parse.replace('-|}', '');
                                        template_data[pno] = attr_arr_all;
                                        checkboxs++;
                                    } else if (name) {
                                        if (tag == 'radios') /*单选组  一个字段*/ {
                                            plugin = p0;
                                            plugin = plugin.replace('|-', '');
                                            plugin = plugin.replace('-|', '');
                                            attr_arr_all['value'] = '';
                                            attr_arr_all['content'] = '<span plugins="radios" name="' + attr_arr_all['name'] + '" title="' + attr_arr_all['title'] + '">';
                                            var dot = '';
                                            p5.replace(preg_group, function(parse_group) {
                                                var option = new Object();
                                                parse_group.replace(preg_attr, function(str0, k, val) {
                                                    if (k == 'value') {
                                                        attr_arr_all['value'] += dot + val;
                                                        dot = ',';
                                                    }
                                                    option[k] = val;
                                                });
                                                option['name'] = attr_arr_all['name'];
                                                if (!attr_arr_all['options']) attr_arr_all['options'] = new Array();
                                                attr_arr_all['options'].push(option);
                                                if (!option['checked']) option['checked'] = '';
                                                var checked = option['checked'] ? 'checked="checked"' : '';
                                                attr_arr_all['content'] += '<input type="radio" name="' + attr_arr_all['name'] + '" value="' + option['value'] + '"  ' + checked + '/>' + option['value'] + '&nbsp;';

                                            });
                                            attr_arr_all['content'] += '</span>';

                                        } else {
                                            attr_arr_all['content'] = is_new ? plugin.replace(/NEWFIELD/, name) : plugin;
                                        }
                                        //attr_arr_all['itemid'] = fields;
                                        //attr_arr_all['tag'] = tag;
                                        template = template.replace(plugin, attr_arr_all['content']);
                                        template_parse = template_parse.replace(plugin, '{' + name + '}');
                                        template_parse = template_parse.replace('{|-', '');
                                        template_parse = template_parse.replace('-|}', '');
                                        if (is_new) {
                                            var arr = new Object();
                                            arr['name'] = name;
                                            arr['plugins'] = attr_arr_all['plugins'];
                                            arr['title'] = attr_arr_all['title'];
                                            arr['orgtype'] = attr_arr_all['orgtype'];
                                            arr['fieldname'] = attr_arr_all['fieldname'];
                                            arr['fieldflow'] = attr_arr_all['fieldflow'];
                                            add_fields[arr['name']] = arr;
                                        }
                                        template_data[pno] = attr_arr_all;
                                    }
                                    pno++;
                                })
                                var view = template.replace(/{\|-/g, '');
                                view = view.replace(/-\|}/g, '');
                                var parse_form = new Object({
                                    'fields': fields, //总字段数
                                    'template': template, //完整html
                                    'parse': view,
                                    'data': template_data, //控件属性
                                    'add_fields': add_fields //新增控件
                                });
                                return JSON.stringify(parse_form);
                            },
                            /*type  =  save 保存设计 versions 保存版本  close关闭 */
                            fnCheckForm: function(type) {

                                if (formEditor.queryCommandState('source'))
                                    formEditor.execCommand('source'); //切换到编辑模式才提交，否则有bug

                                if (formEditor.hasContents()) {
                                    formEditor.sync(); /*同步内容*/
                                    //--------------以下仅参考-----------------------------------------------------------------------------------------------------
                                    var type_value = '',
                                        fields = $("#fields").val(),
                                        formeditor = '';

                                    if (typeof type !== 'undefined') {
                                        type_value = type;
                                    }
                                    //获取表单设计器里的内容
                                    formeditor = formEditor.getContent();
                                    //解析表单设计器控件
                                    // var parse_form = this.parse_form(formeditor,fields);

                                    //alert(formid);
                                    //异步提交数据
                                    $.ajax({
                                        type: 'POST',

                                        url: 'updateFormType',
                                        //dataType : 'json',
                                        data: {
                                            'formId': formid,
                                            'printModel': formeditor
                                        },
                                        success: function(data) {
                                            if (data) {
                                                alert('表单保存成功');
                                                // window.location.href='${ctx}/config/form';
                                            } else {
                                                alert('表单保存失败');
                                            }
                                        }
                                    });
                                } else {
                                    alert('表单内容不能为空！')
                                    $('#submitbtn').button('reset');
                                    return false;
                                }
                            },
                            /*预览表单*/
                            fnReview: function() {
                                if (formEditor.queryCommandState('source'))
                                    formEditor.execCommand('source'); /*切换到编辑模式才提交，否则部分浏览器有bug*/
                                if (formEditor.hasContents()) {
                                    formEditor.sync(); /*同步内容*/
                                    alert("你点击了预览,请自行处理....");
                                    return false;
                                    //--------------以下仅参考-------------------------------------------------------------------
                                    /*设计form的target 然后提交至一个新的窗口进行预览*/
                                    document.saveform.target = "mywin";
                                    window.open('', 'mywin', "menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" + (screen.availWidth - 10) + ",height=" + (screen.availHeight - 50) + "\"");
                                    document.saveform.action = "";
                                    document.saveform.submit(); //提交表单
                                } else {
                                    alert('表单内容不能为空！');
                                    return false;
                                }
                            }
                        };
                    });
                    function recalculation(obj,cb){
                        var maxIndex = 0;
                        var flag = false;

                        try{
                            obj.find('.form_item ').each(function (i,v) {
                                var _this = $(v);

                                _this.attr('name','DATA_'+(i+1));
                                _this.attr('id','DATA_'+(i+1));
                            });
                            flag = true;
                            maxIndex = obj.find('.form_item ').length;
                        }catch (e){
                            //  console.log(e);
                        }
                        cb(flag,maxIndex,obj)
                    }
                </script>
                <!-- script end -->
            </div>
        </div>

        <div class="container_lb" style="z-index: 9000;width: 0;height: 0;">
            <div class="container_lb" style="height: 70px;">
                <%--                <img src="../../img/jiqiao.png" alt="" class="imgs">--%>
                <span class="listclear" style="cursor: pointer;position: absolute;font-size: 18px;top: 0;z-index: 111;right: -71px;top:5px;margin-right: 80px;">x</span>
                <div class="list00" id="list00" style="left: 0px;width: 100%;height: 70px;position: relative">
                    <li class="li active">
                        <div class="text-wz">下拉菜单可以使您在一个有限的空间里设置多种选项，并且可以自定义下拉菜单项、设置默认选中项以及能随时修改下拉项的内容和下拉项的排序。但在表单上显示时只显示一个选项，需要通过单击向下的按钮来显示出所有的选项。</div>
                    </li>
                    <li class="li">
                        <div class="text-wz">单选框可以用来设置预定义的选项，您可以通过单击单选框，选择在一组选项中的一个相应的项。该控件具有互相排斥的特性，即选中其中一项时，该组中其他的选项都不能再被选中。</div>
                    </li>
                    <li class="li">
                        <div class="text-wz">复选框可以用来设置预定义的选项，您可以通过单击复选框，选择在一组选项中的一个或多个相应的项。复选框使用时可以选择多个，并且可以设置复选框的初始选中状态。</div>
                    </li>
                    <li class="li">
                        <div class="text-wz">宏控件可以提高填单速度，使工作流的表单填写更加智能与方便。像系统数据库中的经常用到变量，如当前用户姓名，当前日期等，可以直接调用，不用您手动输入。</div>
                    </li>
                    <li class="li">
                        <div class="text-wz">日历控件实现日期选择窗口的弹出，从而进行日期的选择。可以避免手动输入日期和日期格式不正确的情况。</div>
                    </li>
                    <li class="li">
                        <div class="text-wz">图片上传控件可以在表单中上传图片，使工作流的表单填写更加多样化。当您在想要在表单里的相应位置上传图片时，可以直接使用该控件，即可实现该功能，也能在查看时更加方便直观。</div>
                    </li>
                    <li class="li">
                        <div class="text-wz">手机签字控件可以在表单中添加手机签字的功能，使工作流的表单填写更加直观，便捷。添加并在购买对应的签字控件后，您可以通过手机端在该控件对应的位置进行手写签字等操作，使用体验有很大的提升。</div>
                    </li>
                </div>
                <div class="zz">
                    <div class="arrow" style="left: 40px;top:-11px" id="prev"><div class="prev"></div>上一条</div>&nbsp;&nbsp;&nbsp;<div class="arrow" style="left: 40px;top:-10px"id="next">下一条<div class="next"></div></div></div>
            </div>
        </div>
    </form>

    <script type="text/javascript">
        $(function () {
            $('#nav').on('click','.btn',function () {
                $('.btn').removeClass('bgBack');
                $(this).addClass('bgBack');
            });
            var widthPx = $('#table_box').width();
            var list = document.getElementById('list00');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');

            prev.onclick = function() {
                var index = $('.container_lb .list00 li.active').index();
                if(index == 0){
                    index = $('.container_lb .list00 li').length - 1;
                }else{
                    index--;
                }
                $('.container_lb .list00 li').eq(index).addClass('active').siblings().removeClass('active');
            }
            next.onclick = function() {
                var index = $('.container_lb .list00 li.active').index();
                if(index == $('.container_lb .list00 li').length - 1){
                    index = 0;
                }else{
                    index++;
                }
                $('.container_lb .list00 li').eq(index).addClass('active').siblings().removeClass('active');
            }

        })
        function checkPluType(type) {
            var pluname = '';
            switch (type){
                case 'text':
                    pluname = '单行文本框';
                    break;
                case 'textarea':
                    pluname = '多行文本框';
                    break;
                case 'select':
                    pluname = '下拉菜单';
                    break;
                case 'radio':
                    pluname = '单选框';
                    break;
                case 'checkbox':
                    pluname = '复选框';
                    break;
                case 'macros':
                    pluname = '宏控件';
                    break;
                case 'listing':
                    pluname = '列表控件';
                    break;
                case 'calendar':
                    pluname = '日历控件';
                    break;
                case 'macrossign':
                    pluname = '宏标记';
                    break;
                case 'autocode':
                    pluname = '自动编号';
                    break;
                case 'imgupload':
                    pluname = '图片上传控件';
                    break;
                case 'fileupload':
                    pluname = '文件上传控件';
                    break;
                case 'sign':
                    pluname = '会签控件';
                    break;
                case 'userselect':
                    pluname = '用户选择控件';
                    break;
                case 'deptselect':
                    pluname = '部门选择控件';
                    break;
                case 'dataselect':
                    pluname = '外部数据选择控件';
                    break;
                case 'qrcode':
                    pluname = '二维码控件';
                    break;
                case 'kgsign':
                    pluname = '签章控件';
                    break;
                case 'readcomments':
                    pluname = '阅文意见控件';
                    break;
                case 'writesign':
                    pluname = '手写签字控件';
                    break;
                case 'landmark':
                    pluname = '省市区控件';
                    break;
                default:
                    pluname = '单行文本框';

            }
            return pluname;
        }
        // ue = UE.getEditor('ueBoc',{elementPathEnabled : false});
        UEimgfuc();
        function wordimport(key){
            var me=this;
            $("#wordimportfile").click();
        }

        $('#wordimportfile').fileupload({
            dataType:'json',
            done: function (e, data) {
                if(data.result.obj != ''){
                    var data = data.result.obj;
                    var str = '';
                    var str1 = '';

                    for (var i = 0; i < data.length; i++) {
                        var gs = data[i].attachName.split('.')[1];
                        if(gs == 'jsp'||gs == 'css'||gs == 'js'||gs == 'html'||gs == 'java'||gs == 'php'||gs == 'xls'||gs == 'xlsx' ){
                            str += '';
                            layer.alert('jsp、css、js、html、java文件禁止上传!',{},function(){
                                layer.closeAll();
                            });
                        }else{
                            str+='<div class="dech" deUrl="'+encodeURI(data[i].attUrl)+'" style="display:block;"><a class="ATTACH_a" NAME="'+data[i].attachName+'*" href="<%=basePath %>download?'+encodeURI(data[i].attUrl)+'">'+data[i].attachName+'</a><img class="deImgs" style="margin-left:5px;cursor: pointer;" src="../img/file/icon_deletecha_03.png"/><input type="hidden" NAME="'+data[i].attachName+'*"  class="inHidden" value="'+data[i].aid+'@'+data[i].ym+'_'+data[i].attachId+',"></div>';
                        }
                        <%--if(gs != 'doc' ){--%>
                        <%--str += '';--%>
                        <%--layer.alert('jsp、css、js、html、java文件禁止上传!',{},function(){--%>
                        <%--layer.closeAll();--%>
                        <%--});--%>
                        <%--}else{--%>
                        <%--str+='<div class="dech" deUrl="'+encodeURI(data[i].attUrl)+'" style="display:block;"><a class="ATTACH_a" NAME="'+data[i].attachName+'*" href="<%=basePath %>download?'+encodeURI(data[i].attUrl)+'">'+data[i].attachName+'</a><img class="deImgs" style="margin-left:5px;cursor: pointer;" src="../img/file/icon_deletecha_03.png"/><input type="hidden" NAME="'+data[i].attachName+'*"  class="inHidden" value="'+data[i].aid+'@'+data[i].ym+'_'+data[i].attachId+',"></div>';--%>
                        <%--}--%>
                    }
                    // $('#query_uploadArr').append(str);
                    // $('#query_uploadArr').val();
                } else{
                    //alert('添加附件大小不能为空!');
                    layer.alert('添加附件大小不能为空!',{},function(){
                        layer.closeAll();
                    });
                }
            }
        });
        function asyncUploadFile() {
            // $("#loadingModal").modal('show');
            // $("#loadingModal").modal({backdrop: 'static', keyboard: false});
            var formData = new FormData($('#wordimportform')[0]);
            $("#wordimportfile").val('');
            $.ajax({
                url:'/ueditor/wordToHtml?module=ueditor',
                type:'POST',
                data:formData,
                dataType:'text',
                cache: false,
                processData: false,
                contentType: false,
                success:function (result) {
                    var obj=  JSON.parse(result);
                    var valuecontent=obj.htmlContent;
                    formEditor.execCommand('insertHtml', valuecontent);
                    $("#loadingModal").modal('hide');
                },
                error:function (error) {
                    console.log(error);
                    $("#loadingModal").modal('hide');
                }

            });
        }
    </script>
    <div style="display: none;">
        <form id="wordimportform" enctype="multipart/form-data">
            <input type="file" name="file" id="wordimportfile" onchange="javascript:asyncUploadFile()" />
            <%--<div id="query_uploadArr" name="query_uploadArr" style="display: none;width:240px;height:80px;float:left">--%>
            <%--</div>--%>
        </form>
    </div>
    <div class="modal fade" id="loadingModal" aria-hidden="false">
        <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
            <div class="progress progress-striped active" style="margin-bottom: 0;">
                <div class="progress-bar" style="width: 100%;"></div>
            </div>
            <h5 style="color: #5BC0DE;">正在加载...</h5>
        </div>
    </div>

</body>

</html>
